<template>
  <div class="provider-item">
    <div class="item-title">{{ record.name }}</div>
    <div class="item-tags">
      <div
        class="item-tag"
        :style="{
          color: tag.color,
          borderColor: tag.color,
          background: tag.background,
        }"
        v-for="(tag, index) in tagsList"
      >
        {{ tag.text }}
      </div>
    </div>
    <cell label="服务商类型" :value="record.typeStr" />
    <cell label="服务商备注" style="margin-top: 16rpx" :value="record.remark" />
    <template v-if="showDistributeBtn">
      <u-line color="#EBEDF0FF" margin="24rpx 0" />
      <div class="btn-list">
        <u-button class="custom-button primary" @click="onDistributeClick()">分发</u-button>
      </div>
    </template>
  </div>
</template>
<script>
import cell from "./cell.vue";
export default {
  data() {
    return {};
  },
  props: {
    record: Object,
    showDistributeBtn: {
      type: Boolean,
      default: true,
    },
  },
  components: {
    cell,
  },
  computed: {
    // 标签
    tagsList() {
      const tagsList = [];
      const record = this.record;
      if (this.isValid(record.providerScore)) {
        tagsList.push({
          text: record.providerScore + "分",
          color: "#F79400FF",
          background: "#FFF0DDFF",
        });
      }
      const labelList = record.labelList;
      if (labelList && labelList.length > 0) {
        const colorList = [
          { color: "#0256FFFF", background: "#ECF2FFFF" },
          { color: "#FF874FFF", background: "#FFF1E4FF" },
          { color: "#4208F0FF", background: "#F4E8FFFF" },
        ];
        const tempLabels = labelList.map((label, index) => {
          const colorListIndex = index % colorList.length;
          return {
            text: label,
            ...colorList[colorListIndex],
          };
        });
        tagsList.push(...tempLabels);
      }
      return tagsList;
    },
  },
  methods: {
    onDistributeClick() {
      this.$emit('distribute', this.record)
    }
  },
};
</script>
<style lang="scss" scoped>
.provider-item {
  background: #ffffff;
  box-shadow: 0rpx 4rpx 60rpx 0rpx rgba(201, 205, 216, 0.1265);
  border-radius: 4rpx 4rpx 4rpx 4rpx;
  padding: 32rpx 24rpx 24rpx;
  .item-title {
    height: 44rpx;
    font-weight: 600;
    font-size: 28rpx;
    color: #1a1a1a;
    line-height: 44rpx;
  }
  .item-tags {
    display: flex;
    flex-wrap: wrap;
    margin: 16rpx 0 0;
    .item-tag {
      height: 44rpx;
      line-height: 44rpx;
      border-radius: 4rpx 4rpx 4rpx 4rpx;
      padding: 0 10rpx;
      font-size: 24rpx;
      margin-right: 14rpx;
      margin-bottom: 14rpx;
    }
  }
  .btn-list {
    display: flex;
    justify-content: flex-end;
    .custom-button {
      width: 160rpx;
      height: 64rpx;
      border-radius: 4rpx;
      font-size: 28rpx;
      color: #767676 !important;
      background-color: #fff !important;
      border: 2rpx solid #c1c1c1 !important;
      margin: 0;
    }
    .custom-button.primary {
      background-color: #ff874fff !important;
      border-color: #ff874fff !important;
      color: #fff !important;
    }
  }
}
.provider-item + .provider-item {
  margin-top: 24rpx;
}
</style>
